<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- 上半部分 -->
        <div class="nav-top">
            <div class="nav-main">
                <div><p>张三音乐</p></div> 
                <div>
                    <ul>
                        <li><a href="#">发现音乐<sub class="cor">&nbsp;</sub></a></li>
                        <li><a href="#">我的音乐</a> </li>
                        <li><a href="#">关注</a></li>
                        <li><a href="#">商城</a></li>
                        <li><a href="#">音乐人</a></li>
                        <li><a href="#">下载客户端</a></li>
                    </ul>
                </div>
                <div>
                   
                    <label for=""><input type="text" value="音乐"></label>
                    
                </div>
                <div class="denglu">
                    <a target="_blank" href="pages/index2.html">登录</a>
                </div>
            </div>
        </div>
        <!-- 下半部分 -->
        <div class="nav-bottom">
            <div>
                <ul>
                    <li><a href="#">推荐</a></li>
                    <li><a href="#">排行榜</a></li>
                    <li><a href="#">歌单</a></li>
                    <li><a href="#">主播电台</a></li>
                    <li><a href="#">歌手</a></li>
                    <li><a href="#">新碟上架</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- banner -->
    <div class="box">
    <div class="banner">
        <a href="#">
            <ul>
                <li><img src="images/banner/1.jpg" alt="#"></li>
                <li><img src="images/banner/2.jpg" alt="#"></li>
                <li><img src="images/banner/3.jpg" alt="#"></li>
                <li><img src="images/banner/4.jpg" alt="#"></li>
                <li><img src="images/banner/5.jpg" alt="#"></li>
            </ul>
        </a>
        
    </div>
    <div class="banner-item">  
    </div>
    </div>
    <!-- 回到顶部 -->
    <div class="top">
        <a href="#top">回到顶部</a>
    </div>
    <div class="top1">
        <a href="pages/index3.html"><p>作品介绍页面</p></a>
    </div>
    <!-- 主内容 -->
    <div class="main">
        <!-- 主内容-左 -->
        <div class="main-left">
            <div class="main-item">
                <!-- 主内容-左上 热门-->
                <div class="item-top">
                    <div class="item-top-top">
                        <div>
                            <div class="remen" ><a href="#">热门推荐</a></div>
                            <div>
                                <ul>
                                    <li><a href="#">华语</a></li>
                                    <li><a href="#">流行</a></li>
                                    <li><a href="#">摇滚</a></li>
                                    <li><a href="#">民谣</a></li>
                                    <li><a href="#">电子</a></li>     
                                </ul>
                            </div>
                        </div>
                        <div class="gengduo"><a href="#">更多→</a></div>
                    </div>
                    <hr>
                    <div class="item-top-bottom">
                        <ul>
                            <li><a href="#"><img src="images/left/01.jpg" alt="01">
                                <div>高能燃脂•假期健身跑步必备BGM</div>
                                 
                            </a>   
                            </li>
                            <li><a href="#"><img src="images/left/02.jpg" alt="01">
                                <div>古典清香 I 我的茶馆里住着巴赫与肖邦</div></a>
                                
                            </li>
                            <li><a href="#"><img src="images/left/03.jpg" alt="01">
                                <div>华语伤感 | 遇见了你却错过了她</div></a>
                                
                            </li>
                            <li><a href="#"><img src="images/left/04.jpg" alt="01">
                                <div>熊梓淇来电：时间轮转，愿一切如常</div></a>
                                
                            </li>
                           
                        </ul>
                        <ul class="buttom-ul">
                             <li><a href="#"><img src="images/left/05.jpg" alt="01">
                                <div>阿尔法脑波音乐（激发右脑潜能）增加记忆力</div></a>
                                
                            </li>
                            <li><a href="#"><img src="images/left/06.jpg" alt="01">
                                <div>退休老人的追星生活：他们所追逐的是青春的影子</div></a>
                                
                            </li>
                            <li><a href="#"><img src="images/left/07.jpg" alt="01">
                                <div>2022全网最火超好听热门歌曲（持续更新）</div></a>
                                
                            </li>
                            <li><a href="#"><img src="images/left/08.jpg" alt="01">
                                <div>想某人(抖音DJ热搜版) - 绝世的陈逗逗</div></a>
                                
                            </li>
                        </ul>
                    </div>    
                </div>
                <!-- 主内容-左下 榜单-->
                <div class="item-bottom">
                    <div class="item-top-top">
                        <div>
                            <div class="remen" ><a href="#">榜单</a></div>
                        </div>
                        <div class="gengduo"><a href="#">更多→</a></div>
                    </div>
                    <hr>
                    <!-- 榜单 -->
                    <div class="item-bottom-main">
                        <div class="bottom-box1">
                            <div class="bottom-box1-item f4">
                                <div><a href="#"><img src="images/music/01.jpg" alt="01"></a></div>
                                <div>飙升榜</div>
                            </div>
                            <div>
                                <ol>
                                    <li class="e8">&nbsp;1 <a href="#">三国恋</a> </li>
                                    <li class="f4">&nbsp;2 <a href="#">异地恋</a> </li>
                                    <li class="e8">&nbsp;3 <a href="#">三得利</a></li>
                                    <li class="f4">&nbsp;4 <a href="#">今天一定带你去看海</a></li>
                                    <li class="e8">&nbsp;5 <a href="#">黑乌鸦和少女</a></li>
                                    <li class="f4">&nbsp;6 <a href="#">橘子日落</a></li>
                                    <li class="e8">&nbsp;7 <a href="#">City Of Stars (From...</a></li>
                                    <li class="f4">&nbsp;8 <a href="#">Long Way Home</a></li>
                                    <li class="e8">&nbsp;9 <a href="#">Love Me</a></li>
                                    <li class="f4">10<a href="#">Coffee's On Me</a></li>
                                    <li class="quanbu-bottom e8"><a href="#">查看全部></a></li>
                                </ol>
                            </div>
                        </div>
                        <div class="bottom-box2">
                            <div class="bottom-box1-item f4">
                                <div><a href="#"><img src="images/music/02.jpg" alt="01"></a></div>
                                <div>新歌榜</div>
                            </div>
                            <div>
                                <ol>
                                    <li class="e8">&nbsp;1 <a href="#">篇章</a> </li>
                                    <li class="f4">&nbsp;2 <a href="#">高山低谷 (Live)</a> </li>
                                    <li class="e8">&nbsp;3 <a href="#">异地恋</a></li>
                                    <li class="f4">&nbsp;4 <a href="#">三国恋</a></li>
                                    <li class="e8">&nbsp;5 <a href="#">Bet On Me (Organi</a></li>
                                    <li class="f4">&nbsp;6 <a href="#">独到</a></li>
                                    <li class="e8">&nbsp;7 <a href="#">想自由</a></li>
                                    <li class="f4">&nbsp;8 <a href="#">玫瑰少年</a></li>
                                    <li class="e8">&nbsp;9 <a href="#">再次爱上你</a></li>
                                    <li class="f4">10<a href="#">耍把戏</a></li>
                                    <li class="quanbu-bottom e8"><a href="#">查看全部></a></li>
                                </ol>
                            </div>
                        </div>
                        <div class="bottom-box1">
                            <div class="bottom-box1-item f4">
                                <div><a href="#"><img src="images/music/03.jpg" alt="01"></a></div>
                                <div>原创榜</div>
                            </div>
                            <div>
                                <ol>
                                    <li class="e8">&nbsp;1 <a href="#">我以为你不会出现</a> </li>
                                    <li class="f4">&nbsp;2 <a href="#">DIOR</a> </li>
                                    <li class="e8">&nbsp;3 <a href="#">你的天空</a></li>
                                    <li class="f4">&nbsp;4 <a href="#">十四分之一</a></li>
                                    <li class="e8">&nbsp;5 <a href="#">背觉迷</a></li>
                                    <li class="f4">&nbsp;6 <a href="#">假装（Prod. Po...</a></li>
                                    <li class="e8">&nbsp;7 <a href="#">人海</a></li>
                                    <li class="f4">&nbsp;8 <a href="#">清风</a></li>
                                    <li class="e8">&nbsp;9 <a href="#">平原</a></li>
                                    <li class="f4" class="shuzi-bottom">10<a href="#">摇摆少年</a></li>
                                    <li class="quanbu-bottom e8"><a href="#">查看全部></a></li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 主内容-右 -->
        <div class="main-right">
            <div class="right-top">
                <div class="right-top-main">
                    <div>
                        <p>登录云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    </div>
                    <div class="yonghu"><a href="https://music.163.com/" target="_blank">用户登录</a></div>
                </div>
            </div>
            <div class="right-bottom">
                <div class="right-main-top">
                    <div class="right-main-top-top">
                        <p>入驻歌手</p>
                        <a href="#">查看全部></a>
                    </div>
                    <div class="right-main-top-bottom">
                        <ul>
                            <li>
                                <img src="images/right/01.jpg"  alt="">
                                <div>
                                    <a href="#">张惠妹aMEI</a>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </li>
                            <li>
                                <img src="images/right/02.jpg" alt="">
                                <div>
                                    <a href="#">呉墨愁Momo</a>
                                    <p>《中国好声音》..</p>
                                </div>
                            </li>
                            <li>
                                <img src="images/right/03.jpg" alt="">
                                <div>
                                    <a href="#">孙楠</a>
                                    <p>歌手孙楠《燃烧》</p>
                                </div>
                            </li>
                            <li>
                                <img src="images/right/04.jpg" alt="">
                                <div>
                                    <a href="#">麦田老狼</a>
                                    <p>歌手，音乐人</p>
                                </div>
                            </li>
                            <li>
                                <img src="images/right/05.jpg" alt="">
                                <div>
                                    <a href="#">陈楚生</a>
                                    <p>唱作歌手</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <button>申请成为音乐人</button>
                    
                </div>
                <div class="right-main-bottom">
                    <div class="right-main-top-top">
                        <p>热门主播</p>
                        
                    </div>
                    <ul>
                        <li>
                            <a href="#"><img src="images/buttom/01.jpg" alt=""></a>
                            <div>
                                <a href="#">陈立</a>
                                <p>理学家、美食家...</p>
                            </div>
                        </li>
                        <li>
                            <a href="#"><img src="images/buttom/02.jpg" alt=""></a>                            <div>
                                <a href="#">刘维-Julius</a>
                                <p>歌手、播客节目</p>
                            </div>
                        </li>
                        <li>
                            <a href="#"><img src="images/buttom/03.jpg" alt=""></a>                            <div>
                                <a href="#">莫非定律MoreFeel</a>
                                <p>男女双人全创作...</p>
                            </div>
                        </li>
                        <li>
                            <a href="#"><img src="images/buttom/04.jpg" alt=""></a>                            <div>
                                <a href="#">碎嘴许美达</a>
                                <p>脱口秀网络红人</p>
                            </div>
                        </li>
                        <li>
                            <a href="#"><img src="images/buttom/05.jpg" alt=""></a>                            <div>
                                <a href="#">银临Rachel</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="fengexian"></div>
    <!-- 页脚 -->
    <div class="footer">
        <p>此作品为大学生自主创作，参考自《网易云音乐》，仅作为作业评比，如有侵权立删</p>
        <div><a href="#top">回到顶部</a></div>
    </div>
</body>
</html>